<template>
	<view class="content mywordcard">
		<view class="fixed-top">
			<view class="search-box flexbox flexbox-middle">
				<view class="input-box flexchild">
					<image class="search-icon" src="/static/images/search_icon.png"></image>
					<input class="uni-input" confirm-type="search" @confirm="handlesearch" v-model="keyword" placeholder="搜索签发单位，证件名称等" />
				</view>
				<view class="f-32" @click="handlesearch">搜索</view>
			</view>

			<!-- <view class="tab-list flexbox flexbox-middle">
				<view class="tab-item flexchild active">全部</view>
				<view class="tab-item flexchild">生效中</view>
				<view class="tab-item flexchild">待激活</view>
				<view class="tab-item flexchild">待签发</view>
			</view> -->

		</view>

		<s-pull-scroll ref="pullScroll" :top="110" :bottom="0" :pullDown="pullDown" :pullUp="getList">
			<view class="back-view"></view>
			<view class="result-list">
				<view v-for="(item, index) in list" :key="item.id" class="list-item flexbox" :class="{'overtime': item.status == '2'}"
				 @click="certificateDetail(item)"> 
					<!-- 'status'=>2，已失效 3 待签发 1 生效中 4 待激活 -->
					<image v-if="item.status == '1'" class="back-img" src="/static/images/workcarc_back.png"></image>
					<image v-if="item.status == '4'" class="back-img" src="/static/images/workcarc_back2.png"></image>
					<image v-if="item.status == '3'" class="back-img" src="/static/images/workcarc_back3.png"></image>
					<image v-if="item.status == '2'" class="back-img" src="/static/images/workcarc_back4.png"></image>
					<view class="stauts-label flexbox flexbox-middle" :class="'status' + item.status">{{item.status_name}}</view>

					<view v-if="item.status == '1'" class="operation-box flexbox flexbox-middle">
						<view @click.stop="certifiteCode(item)" class="flexchild operation-box-btn">证件码</view>
						<view class="gan"></view>
						<view @click.stop="certificateDetail(item)" class="flexchild">查看证件</view>
					</view>
					
					<view v-if="item.status == '3'" class="operation-box flexbox flexbox-middle ta-l">
						<view class="flexchild f-28">工作证正在签发中…</view>
					</view>
					
					<view v-if="item.status == '4'" class="operation-box flexbox flexbox-middle ta-l">
						<view class="flexchild f-28">欢迎领取工作证</view>
						<view  @click.stop="handleActive(item)"  class="active-btn">立即激活</view>
					</view>

					<!-- <view class="operation-box flexbox flexbox-middle">
						<view class="flexchild">立即激活</view>
					</view> -->
					<view class="data-left flexchild">
						<view class="name flexbox flexbox-middle f-36">
							<image class="card-icon" src="/static/images/card_icon.png"></image>
							{{item.card_name || '可信工作证'}}
						</view>
						<view class="data-content">
							<view class="label f-24">签发单位</view>
							<view class="value ellipsis">{{item.company_name}}</view>
							<view class="label f-24">有效期限</view>
							<view class="value">{{item.failure_date}}</view>
						</view>
					</view>
					<image class="more-icon" v-if="item.status == '1'" src="/static/images/more_icon_white.png"></image>
				</view>

			</view>
			
			<!-- 使用插槽自定义空白布局 -->
			  <view slot="empty" class="empty">
				 <image class="empty-img" src="/static/images/card_empty.png"></image>
			  	 <view>暂时没有任何证件～</view>
			  </view>
		</s-pull-scroll>

		



	</view>


</template>

<script>
	import sPullScroll from '@/components/s-pull-scroll/index.vue';
	export default {
		components: {
			sPullScroll
		},
		data() {
			return {
				keyword: '',
				page: 1,
				limit: 10,
				list: [],
				loadingType: 0,
				contentText: this.$LoadingText,
				count: 0,
				contentFlag: false,
				scrollTop: -5,
				beginrefresh: false,
				test: 0
			}
		},
		onLoad (e) {
		    this.refresh();
			let ctid = e.ctid || ''
			if (ctid) {
				uni.setStorageSync('ctid', ctid);
			}
		},
		methods: {
			refresh () {
			  this.$nextTick(() => {
				this.$refs.pullScroll.refresh();
			  });
			},
			pullDown (pullScroll) {
				this.page = 1
				setTimeout(() => {
					this.getList(pullScroll);
				}, 200);
			},
			handlesearch() {
				this.page = 1
				this.$refs.pullScroll.refresh();
			},
			getList(pullScroll) {
				if (pullScroll.page == 1) {
				  this.list = [];
				  this.contentFlag = false
				}
				let param = {
					keyword: this.keyword,
					status: 0,
					page: this.page,
					page_size: this.limit
				}
				this.$HTTP.post('/work_permit_card/cert_list', param, true).then((res) => {
					this.contentFlag = true
					if (this.page == 1 && !res.data.list) {
						pullScroll.empty()
					}
					if (res.data.list && res.data.list.length > 0) {
						this.list = this.list.concat(res.data.list);
						this.count = res.data.count;
					}
					if (this.list.length == res.data.count) {
						pullScroll.finish();
						return false
					} else {
						this.page ++ 
						pullScroll.success();
					}
					this.loadingType = 0
				}).catch(err => {

				})
			},
			certificateDetail(item) {
				if (item.status != '1') {
					return false
				}
				uni.navigateTo({
					url: `/pages/certificateInfo/index?id=${item.id}`
				});
			},
			handleActive(item) {
				uni.navigateTo({
					url: `/pages/getCertificate/index?id=${item.id}`
				});
			},
			certifiteCode(item) {
				if (item.status != '1') {
					return false
				}
				uni.navigateTo({
					url: `/pages/certificateCode/index?id=${item.id}&user_id=${item.uid}`
				});
			}
		}


	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>
<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
</style>
